<template>
  <div class="searchHistory">
    <!-- 标题 -->
<van-cell title="搜索历史"  >
  <template>
    <van-icon @click="isDelete=true" v-if="!isDelete" name="delete-o" />
    <div v-else>
      <!-- <span @click="history.splice(0)">全部删除</span>
       -->
      <span @click="$emit('clear')">全部删除</span>

      <span @click="isDelete=false" class="all">完成</span>
    </div>
  </template>
</van-cell>

<!-- 搜索列表-->

<van-cell @click="onClickHistory(item)" :title="item"  v-for='item in history' :key="item " >
  <template>
    <van-icon name="close" v-if='isDelete' />
  </template>
</van-cell>
  </div>
</template>

<script>
export default {
  props: {
    history: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      isDelete: false
    }
  },

  created () {

  },

  methods: {
    onClickHistory (val) {
      if (this.isDelete) {
        // 删除
        const index = this.history.indexOf(val)
        this.history.splice(index, 1)
      } else {
        // 搜索
        this.$emit('onSearch', val)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.all{
  margin-left: 7px;
}
</style>
